<template>
  <view class="review uni-pa-5  uni-mb-5" v-if="review.list.length > 0">
    <view class="top">
      <text class="label">评价 {{ review.stat.sales }} 条</text>
      <text class="second-label">好评度 {{ review.stat.favorableRate }}% ></text>
    </view>
    <scroll-view class="review-scroll" scroll-x="true" scrool-left="120">
      <view class="item" v-for="(reviewItem, reviewIdx) in review.list" :key="reviewIdx">
        <view class="left">
          <view class="user">
            <view class="avatar">
              <image style="width: 40px; height: 40px;border-radius: 40px" :src="reviewItem.user.avatar"></image>
            </view>
            <view class="mark">
              <text class="nickname uni-ml-2">{{ reviewItem.user.nickname }}</text>
              <uni-rate readonly :value="reviewItem.mark" color="#bbb" active-color="red"></uni-rate>
            </view>
          </view>
          <view>
            <text class="content">{{ reviewItem.content }}</text>
          </view>
        </view>
        <view class="right">
          <image style="width: 120px; height: 120px;" :src="reviewItem.imgs[0]"></image>
        </view>
      </view>
    </scroll-view>

  </view>
  <view class="review-empty uni-pa-5  uni-mb-5" v-else>
    <text>暂无评论</text>
  </view>
</template>
<script setup lang="ts">

import {ReviewCls} from "@/types/productcls";

defineProps({
  review: {
    required: true,
    type: ReviewCls
  }
})

</script>
<style lang="scss">
.review, .review-empty {
  background-color: #fff;
  height: 20%;

  .top {
    display: flex;
    justify-content: space-between;

    .second-label {
      font-size: 14px;
      color: $uni-color-subtitle;
    }
  }

  .review-scroll {
    white-space: nowrap;
    margin-top: 10px;

    .item {
      display: inline-flex;
      justify-content: space-between;
      height: 120px;
      width: 100%;

      .left {
        display: inline-flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: self-start;
        width: 50%;

        .user {
          display: flex;
          justify-content: flex-end;

          .avatar {
            margin-right: 10px;
          }

          .mark {
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .nickname {
              font-size: 14px;
              color: $uni-secondary-color;
            }
          }
        }

        .content {
          font-size: 14px;
          display: -webkit-box; /* 必须指定为 box */
          -webkit-box-orient: vertical; /* 设置垂直布局 */
          overflow: hidden;
          text-overflow: ellipsis;
          -webkit-line-clamp: 2;
        }
      }

      .right {
        width: 40%;
        display: inline-flex;
        justify-content: center;
      }
    }
  }
}

.review-empty {
  display: flex;
  justify-content: center;
  align-items: center;
  color: $uni-secondary-color;
}
</style>